<template>
  <view class="content">
	   <!-- v-if="role == 4" -->
    <view class="btn">
      <tui-button width="450rpx" height="80rpx" @click="scan(true)">
        <view style="display: flex; align-items: center; justify-content: center">
          <text class="iconfont icon-scan" style="font-size: 50rpx"></text>
          <text style="margin-left: 10rpx"> 绑定新设备 </text>
        </view>
      </tui-button>
    </view>
    <scroll-list ref="scrollList" :scrollFlag="false" @getData="getData">
      <template v-slot="{ item, index }">
        <view class="item" @click="showActionSheet(item)">
          <view class="left">
            <image v-if="item.imgUrl" :src="item.imgUrl" />
            <image v-else src="@/static/image/noimg.png" />
          </view>
          <view class="right">
            <view>{{ item.deviceNo }}</view>
            <view>
              <text>{{ item.typeName }}</text>
              <text class="iconfont icon-right" />
            </view>
            <view>{{ item.bindTime }}</view>
          </view>
        </view>
      </template>
    </scroll-list>
  </view>
</template>

<script>
import scrollList from "@/components/scroll-list/scroll-list.vue";

export default {
  components: { scrollList },
  data() {
    return {
      patientId: "",
      item: null,
      role: uni.getStorageSync("role"),
    };
  },
  onShareAppMessage() {
    return this.$util.returnShareObj();
  },
  onLoad(options) {
    if (options.patientId || uni.getStorageSync("patientId")) {
      this.patientId = options.patientId || uni.getStorageSync("patientId");
      if (options.patientId) {
        uni.setNavigationBarTitle({ title: "患者设备" });
      }
      this.$nextTick(() => {
        this.$refs.scrollList.getData(1);
      });
    }
  },
  onPullDownRefresh() {
    this.$refs.scrollList.getData(2);
  },
  onReachBottom() {
    this.$refs.scrollList.getData(3);
  },
  methods: {
    showActionSheet(item) {
      this.item = item;
      let itemList = ["设备详情", "使用说明"];
      if (this.role == 4) {
        itemList.push("更换设备");
      }
      uni.showActionSheet({
        itemList,
        success: (res) => {
          if (res.tapIndex == 2) {
            this.scan();
          } else if (res.tapIndex == 1) {
            if (item.helpManualUrl) {
              this.openDocument(item.helpManualUrl);
            } else {
              this.$util.showToast("暂无使用说明");
            }
          } else {
            this.getDetails(null, false);
          }
        },
      });
    },
    openDocument(url) {
      uni.showLoading({
        mask: true,
        title: "加载中",
      });
      uni.downloadFile({
        url,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log("打开文档成功");
            },
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
    getDetails(deviceNo, bind) {
      this.$api.doctorGetDeviceDetailByScanCode({ deviceNo: deviceNo || this.item.deviceNo }).then((res) => {
        if (res.code == 200) {
          uni.showModal({
            title: bind ? "确认绑定？" : "设备详情",
            content: `设备编号：${res.data.deviceNo}\n 设备名称：${res.data.typeName}\n生产厂家：${res.data.factory||'--'}\n出厂日期：${res.data.dateOfProduction||'--'}`,
            showCancel: bind,
            success: (res1) => {
              if (res1.confirm) {
                if (bind) {
                  this.bind(res.data.deviceNo);
                }
              }
            },
          });
        } else {
          uni.hideLoading();
          uni.showModal({
            title: "提示",
            content: res.msg,
            showCancel: false,
          });
        }
      });
    },
    bind(deviceNo) {
      this.$api[this.item ? "doctorBindDeviceChange" : "doctorBindDevice"]({
        deviceNo,
        patientId: this.patientId,
        oldDeviceNo: this.item ? this.item.deviceNo : "",
      }).then((res) => {
        if (res.code == 200) {
          uni.setStorageSync("refreshMyPatient", true);
          this.$util.showSuccessToast(this.item ? "换绑成功" : "绑定成功");
          this.$refs.scrollList.getData(2);
        }
      });
    },
    scan(clearItem) {
      if (clearItem) {
        this.item = null;
      }
	  
	  uni.showActionSheet({
	    itemList:['扫码','手动输入'],
	    success: (res1) => {
	      if (res1.tapIndex == 1) {
	        uni.showModal({
	          title: "提示",
	          placeholderText: "请输入设备号",
	          editable: true,
	          success: (res) => {
	            if (res.confirm) {
	              if (res.content) {
	                this.getDetails(res.content, true);
	              }
	            }
	          },
	        });
	      }  else {
	       uni.scanCode({
	         success: (res) => {
	           if (res.errMsg == "scanCode:ok") {
	             let index = res.result.indexOf("imei=");
	             if (index < 0) {
				   this.getDetails(res.result, true);
	             } else {
	               this.getDetails(res.result.substring(index + 5, res.result.length), true);
	             }
	           } else {
	             this.$util.showToast("无法识别该二维码");
	           }
	         },
	       });
	      }
	    },
	  });
    },
    getData(param) {
      this.$api.doctorBindDeviceList({ pageSize: 20, pageNum: param.pageNo, patientId: this.patientId }).then((res) => {
        if (res.code == 200) {
         this.$refs.scrollList.setData(res.rows, param.pageNo * 20 >= res.total);
        } else {
          this.$refs.scrollList.setData(false, false);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  background: $back-grey-color;
  min-height: 100vh;
  .btn {
    background: $back-grey-color;
    padding: 20rpx 0 20rpx 150rpx;
    position: sticky;
    top: 0;
    z-index: 100;
  }
}
.item {
  width: 100vw;
  background: #fff;
  border-bottom: 1rpx solid $default-border-color;
  padding: 20rpx 20rpx 20rpx 40rpx;
  box-sizing: border-box;
  color: $font-grey-color;
  display: flex;
  position: relative;
  .left {
    margin-right: 40rpx;
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: $default-border-radius;
    }
  }
  .right {
    width: calc(100% - 190rpx);
    view:first-child {
      color: $default-color;
      font-weight: bold;
    }
    view:nth-child(2) {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .iconfont {
        color: $default-color;
      }
    }
  }
}
.item::after {
  content: "";
  position: absolute;
  height: 1rpx;
  width: 40rpx;
  background: #fff;
  left: 0;
  bottom: 0;
}
</style>
